<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分包API测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 50px auto;
            padding: 20px;
        }
        .form-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        button {
            background-color: #1890ff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }
        button:hover {
            background-color: #40a9ff;
        }
        #result {
            margin-top: 20px;
            padding: 15px;
            background-color: #f5f5f5;
            border-radius: 4px;
            white-space: pre-wrap;
            max-height: 500px;
            overflow-y: auto;
        }
        .error {
            color: red;
        }
        .success {
            color: green;
        }
    </style>
</head>
<body>
    <h1>分包项目API测试工具</h1>
    
    <div class="form-group">
        <label>Base URL:</label>
        <input type="text" id="baseUrl" value="http://localhost:8087" />
    </div>
    
    <div class="form-group">
        <label>项目编号 (projectCode):</label>
        <input type="text" id="projectCode" placeholder="例如: PROJ001" />
    </div>
    
    <div class="form-group">
        <label>Token (从localStorage获取或手动输入):</label>
        <textarea id="token" rows="3" placeholder="点击'自动获取Token'或手动粘贴"></textarea>
    </div>
    
    <div>
        <button onclick="getTokenFromLocalStorage()">从localStorage获取Token</button>
        <button onclick="testSubcontractAPI()">测试分包API</button>
        <button onclick="clearResult()">清除结果</button>
    </div>
    
    <div id="result"></div>

    <script>
        // 从localStorage获取token
        function getTokenFromLocalStorage() {
            // 尝试从不同来源获取token
            const token = localStorage.getItem('token') || 
                         localStorage.getItem('authToken') ||
                         sessionStorage.getItem('token');
            
            if (token) {
                document.getElementById('token').value = token;
                console.log('Token已获取');
            } else {
                alert('未找到token，请先登录或手动输入token');
            }
        }

        // 测试分包API
        async function testSubcontractAPI() {
            const baseUrl = document.getElementById('baseUrl').value;
            const projectCode = document.getElementById('projectCode').value;
            const token = document.getElementById('token').value;
            const resultDiv = document.getElementById('result');

            // 验证输入
            if (!projectCode) {
                resultDiv.innerHTML = '<p class="error">请填写项目编号</p>';
                return;
            }

            if (!token) {
                resultDiv.innerHTML = '<p class="error">请填写Token</p>';
                return;
            }

            // 构建URL
            const url = `${baseUrl}/api/project-cards/${projectCode}/subcontract-projects`;
            
            resultDiv.innerHTML = '<p>请求中...</p>';
            resultDiv.innerHTML += `URL: ${url}<br/>`;
            resultDiv.innerHTML += `Method: GET<br/>`;
            resultDiv.innerHTML += `<hr/>`;

            try {
                const response = await fetch(url, {
                    method: 'GET',
                    headers: {
                        'Authorization': `Bearer ${token}`,
                        'Content-Type': 'application/json'
                    }
                });

                const data = await response.json();
                
                if (response.ok) {
                    resultDiv.innerHTML += `<h3 class="success">✓ 请求成功</h3>`;
                    resultDiv.innerHTML += `<p><strong>状态码:</strong> ${response.status}</p>`;
                    resultDiv.innerHTML += `<p><strong>响应数据:</strong></p>`;
                    resultDiv.innerHTML += `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                    
                    // 显示数据摘要
                    if (data.code === 200 && data.data) {
                        const projects = data.data;
                        resultDiv.innerHTML += `<hr/>`;
                        resultDiv.innerHTML += `<p><strong>分包项目数量:</strong> ${projects.length}</p>`;
                        
                        if (projects.length > 0) {
                            resultDiv.innerHTML += `<p><strong>项目列表:</strong></p>`;
                            resultDiv.innerHTML += `<ul>`;
                            projects.forEach((project, index) => {
                                resultDiv.innerHTML += `<li>${index + 1}. ${project.projectSubname || project.projectName || '未知项目'} (ID: ${project.id}, 类型: ${project.projectType})</li>`;
                            });
                            resultDiv.innerHTML += `</ul>`;
                        }
                    }
                } else {
                    resultDiv.innerHTML += `<h3 class="error">✗ 请求失败</h3>`;
                    resultDiv.innerHTML += `<p><strong>状态码:</strong> ${response.status}</p>`;
                    resultDiv.innerHTML += `<p><strong>错误信息:</strong></p>`;
                    resultDiv.innerHTML += `<pre>${JSON.stringify(data, null, 2)}</pre>`;
                }
            } catch (error) {
                resultDiv.innerHTML += `<h3 class="error">✗ 请求异常</h3>`;
                resultDiv.innerHTML += `<p><strong>错误:</strong> ${error.message}</p>`;
                resultDiv.innerHTML += `<pre>${error.stack}</pre>`;
            }
        }

        // 清除结果
        function clearResult() {
            document.getElementById('result').innerHTML = '';
        }

        // 页面加载时尝试自动获取token
        window.onload = function() {
            getTokenFromLocalStorage();
        };
    </script>
</body>
</html>

